<template>
  <div class="test-result">
    <div class="result-header">
      <h2>测试结果</h2>
      <div class="score-summary">
        <div class="total-score">
          <span class="label">总分：</span>
          <span class="value">{{ result.total_score }} 分</span>
        </div>
        <div class="user-score">
          <span class="label">得分：</span>
          <span class="value" :class="scoreClass">{{ result.user_score }} 分</span>
        </div>
        <div class="accuracy">
          <span class="label">正确率：</span>
          <span class="value">{{ accuracy }}%</span>
        </div>
      </div>
    </div>

    <div class="suggestions" v-if="result.suggestions && result.suggestions.length > 0">
      <h3>学习建议</h3>
      <ul>
        <li v-for="(suggestion, index) in result.suggestions" :key="index">
          {{ suggestion }}
        </li>
      </ul>
    </div>

    <div class="questions-review">
      <h3>题目回顾</h3>
      <div 
        v-for="(question, index) in result.questions" 
        :key="question.id" 
        class="review-item"
        :class="{ correct: question.is_correct, wrong: !question.is_correct }"
      >
        <div class="review-header">
          <span class="question-number">第 {{ index + 1 }} 题</span>
          <span class="question-status" :class="question.is_correct ? 'correct' : 'wrong'">
            {{ question.is_correct ? '✓ 正确' : '✗ 错误' }}
          </span>
        </div>
        
        <div class="question-content" v-html="formatContent(question.content)"></div>
        
        <div class="answer-section">
          <div class="correct-answer">
            <strong>正确答案：</strong>{{ question.correct_answer }}
          </div>
          <div class="user-answer" v-if="question.user_answer">
            <strong>你的答案：</strong>{{ question.user_answer }}
          </div>
          <div class="explanation" v-if="question.explanation">
            <strong>解析：</strong>{{ question.explanation }}
          </div>
        </div>
      </div>
    </div>

    <div class="result-actions">
      <el-button type="primary" @click="downloadPaper">
        下载试卷
      </el-button>
      <el-button @click="$emit('retry')">再次测试</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface QuestionResult {
  id: number
  content: string
  type: string
  correct_answer: string
  user_answer?: string
  explanation?: string
  is_correct?: boolean
  score: number
}

interface TestResult {
  total_score: number
  user_score: number
  correct_count: number
  total_questions: number
  questions: QuestionResult[]
  suggestions?: string[]
}

const props = defineProps<{
  result: TestResult
}>()

const emit = defineEmits<{
  (e: 'retry'): void
}>()

const accuracy = computed(() => {
  if (props.result.total_questions === 0) return 0
  return Math.round((props.result.correct_count / props.result.total_questions) * 100)
})

const scoreClass = computed(() => {
  const ratio = props.result.user_score / props.result.total_score
  if (ratio >= 0.8) return 'excellent'
  if (ratio >= 0.6) return 'good'
  if (ratio >= 0.4) return 'average'
  return 'poor'
})

const formatContent = (content: string) => {
  return content.replace(/\n/g, '<br>')
}

const downloadPaper = () => {
  // 实现下载功能
  const content = generateDownloadContent()
  const blob = new Blob([content], { type: 'text/plain' })
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = `数学测试结果_${new Date().toLocaleDateString()}.txt`
  a.click()
  URL.revokeObjectURL(url)
}

const generateDownloadContent = () => {
  let content = `数学测试结果\n`
  content += `====================\n`
  content += `总分: ${props.result.total_score} 分\n`
  content += `得分: ${props.result.user_score} 分\n`
  content += `正确率: ${accuracy.value}%\n`
  content += `\n学习建议:\n`
  
  if (props.result.suggestions) {
    props.result.suggestions.forEach(suggestion => {
      content += `• ${suggestion}\n`
    })
  }
  
  content += `\n题目详情:\n`
  content += `====================\n`
  
  props.result.questions.forEach((question, index) => {
    content += `\n第 ${index + 1} 题 ${question.is_correct ? '✓' : '✗'}\n`
    content += `题目: ${question.content.replace(/<br>/g, '\n')}\n`
    content += `正确答案: ${question.correct_answer}\n`
    if (question.user_answer) {
      content += `你的答案: ${question.user_answer}\n`
    }
    if (question.explanation) {
      content += `解析: ${question.explanation}\n`
    }
    content += `\n`
  })
  
  return content
}
</script>

<style scoped>
.test-result {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.result-header {
  text-align: center;
  margin-bottom: 30px;
  padding: 30px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 12px;
}

.score-summary {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 20px;
}

.score-summary div {
  text-align: center;
}

.label {
  display: block;
  font-size: 14px;
  margin-bottom: 5px;
}

.value {
  font-size: 24px;
  font-weight: bold;
}

.value.excellent { color: #67c23a; }
.value.good { color: #e6a23c; }
.value.average { color: #f56c6c; }
.value.poor { color: #f56c6c; }

.suggestions {
  margin-bottom: 30px;
  padding: 20px;
  background: #f0f9ff;
  border-radius: 8px;
  border-left: 4px solid #1890ff;
}

.suggestions h3 {
  color: #1890ff;
  margin-bottom: 15px;
}

.suggestions ul {
  list-style: none;
  padding: 0;
}

.suggestions li {
  padding: 8px 0;
  border-bottom: 1px solid #e8f4ff;
}

.suggestions li:last-child {
  border-bottom: none;
}

.questions-review {
  margin-bottom: 30px;
}

.review-item {
  margin-bottom: 20px;
  padding: 20px;
  border-radius: 8px;
  border-left: 4px solid;
}

.review-item.correct {
  border-color: #67c23a;
  background: #f0f9eb;
}

.review-item.wrong {
  border-color: #f56c6c;
  background: #fef0f0;
}

.review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.question-status.correct {
  color: #67c23a;
  font-weight: bold;
}

.question-status.wrong {
  color: #f56c6c;
  font-weight: bold;
}

.answer-section {
  margin-top: 15px;
}

.answer-section div {
  margin-bottom: 8px;
}

.correct-answer {
  color: #67c23a;
}

.user-answer {
  color: #f56c6c;
}

.explanation {
  color: #666;
  font-style: italic;
}

.result-actions {
  text-align: center;
  margin-top: 40px;
}

.result-actions .el-button {
  margin: 0 10px;
}
</style>